<template>
    <div class="wrapper">
        <header>
            <p>我的评论</p>
        </header>

        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="err" class="error">{{ err }}</div>

        <ul v-else class="comment-list">
            <li v-for="comment in comments" :key="comment.id" class="comment-item">
                <div class="comment-header">
                    <span class="comment-business">{{ comment.businessName }}</span>
                    <span class="comment-date">{{ formatTime(comment.createTime || comment.createdAt || comment.date)
                    }}</span>
                </div>
                <div class="comment-content">{{ comment.content }}</div>
                <div class="comment-rating">评分：{{ comment.rating }}</div>
            </li>
            <li v-if="comments.length === 0" class="no-comment">暂无评论</li>
        </ul>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axiosLib from 'axios'

const comments = ref([]);
const loading = ref(false)
const err = ref('')

const http = window.axios || axiosLib
const userId = sessionStorage.getItem('userId') || ''

function formatTime(val) {
    if (!val) return ''
    const d = new Date(val)
    if (isNaN(d.getTime())) return String(val)
    const pad = n => (n < 10 ? '0' + n : n)
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
}

onMounted(async () => {
    if (!http) { err.value = '网络模块未就绪'; return }
    if (!userId) { err.value = '请先登录'; return }
    loading.value = true
    try {
        const res = await http.get('/comments/current-user')
        const list = Array.isArray(res?.data?.data) ? res.data.data
            : (Array.isArray(res?.data) ? res.data : [])
        comments.value = list.map(it => ({
            ...it,
            businessName: it.businessName || it.business?.businessName || '',
            rating: it.rating ?? it.score ?? '',
            createTime: it.createTime || it.createdAt || it.updateTime || it.date
        }))
    } catch (e1) {
        try {
            const res2 = await http.get(`/comments/user/${userId}`)
            const list2 = Array.isArray(res2?.data?.data) ? res2.data.data
                : (Array.isArray(res2?.data) ? res2.data : [])
            comments.value = list2
        } catch (e2) {
            console.error(e2)
            err.value = '加载失败，请稍后重试'
        }
    } finally {
        loading.value = false
    }
})
</script>

<style scoped>
.wrapper {
    width: 100vw;
    min-height: 100vh;
    background: #f7f8fa;
}

header {
    width: 100vw;
    height: 12vw;
    background: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading {
    text-align: center;
    color: #888;
    margin-top: 3vw;
}

.error {
    text-align: center;
    color: #d9534f;
    margin-top: 3vw;
}

.comment-list {
    width: 92vw;
    margin: 4vw auto 0;
    padding: 0;
    list-style: none;
}

.comment-item {
    background: #fff;
    border-radius: 2vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    margin-bottom: 3vw;
    padding: 2vw 3vw;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    font-size: 3vw;
    color: #888;
    margin-bottom: 1vw;
}

.comment-business {
    font-weight: bold;
    color: #0097FF;
}

.comment-date {
    font-size: 2.8vw;
}

.comment-content {
    font-size: 3.4vw;
    color: #333;
    margin-bottom: 1vw;
}

.comment-rating {
    font-size: 3vw;
    color: #FFB800;
}

.no-comment {
    text-align: center;
    color: #aaa;
    padding: 2vw 0;
}
</style>